<template>
	<view>
		<uni-search-bar placeholder="搜索律师" @confirm="shou"></uni-search-bar>
		<u-swiper @click="toxinxian11(iiid)" @change="chang"  :height="250" :list="lun" :effect3d="true":interval="3000"></u-swiper>
		<view >
			<uni-group>
				<u-section title="法律专长" :right="false"></u-section>
				<swiper>
					<swiper-item>
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in reactive" v-if="index1<8"  :key="index1" @click="tolist(item1.id)">
								<image class="item-menu-image" :src="base+item1.imgUrl" mode=""></image>
								<view class="item-menu-name">{{item1.name}}</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in reactive" v-if="index1>8"  :key="index1" @click="tolist(item1.id)">
								<image class="item-menu-image" :src="base+item1.imgUrl" mode=""></image>
								<view class="item-menu-name">{{item1.name}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-group>
			<uni-group>
				<u-section title="我的咨询" :right="false"></u-section>
				<uni-card @click="tozhix">
					<view class="u-demo-title">我的咨询</view>
				</uni-card>
			</uni-group>
			<uni-group>
				<u-section title="本月上榜优选律师" :right="false"></u-section>
				<u-card v-for="(item,index) in lvshi" :thumb="base+item.avatarUrl" :title="item.name">
					<view slot="body">
						<view>从业年限时间：{{item.workStartAt}}</view>
						<view>咨询人数：{{item.serviceTimes}}</view>
						<view>法律专长：{{item.legalExpertiseName}}</view>
						<view>好评率：{{item.favorableRate}}%</view>
						<br>
						<button type="primary" @click="tozhu(item.id)">咨询</button>
					</view>
				</u-card>
				<button type="primary" @click="todd">查看更多</button>
			</uni-group>
		</view>
	</view>
</template>

<script>
	import api from 'commer/apiURL.js'
	export default {
		data() {
			return {
				base:api.baseurl,
				lun:[],
				reactive:[],
				lvshi:[],
			}
		},
		onLoad() {
			this.getlun()
			this.getfen()
			this.getlvshi()
		},
		onBackPress() {
			uni.switchTab({
				url:'../../index/index'
			})
			return true
		},
		methods: {
			tozhix(){
				uni.navigateTo({
					url:'zhilist'
				})
			},
			tozhu(id){
				uni.navigateTo({
					url:'xiangq2?id='+id
				})
			},
			shou(e){
				uni.navigateTo({
					url:'zhuanc1?name='+e.value
				})
			},
			todd(){
				uni.navigateTo({
					url:'zhuanc1'
				})
			},
			tolist(id){
				uni.navigateTo({
					url:'zhuanc1?id='+id
				})
			},
			getlun() {
				this.$get(this.base + '/prod-api/api/lawyer-consultation/ad-banner/list').then((res) => {
					res.data.forEach((item) => {
						this.lun.push({
							image: this.base+item.imgUrl,
							id: item.targetId
						})
					})
				})
			},
			getfen(){
				this.$get(this.base+'/prod-api/api/lawyer-consultation/legal-expertise/list').then((res)=>{		
					this.reactive = res.rows
				})
			},
			getlvshi(){
				this.$get(this.base+'/prod-api/api/lawyer-consultation/lawyer/list-top10').then((res)=>{		
					this.lvshi = res.data
				})
			},
		}
	}
</script>

<style>
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.item-menu-image {
		width: 80rpx;
		height: 80rpx;
	}
</style>
